import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:x_common_utils/utils/inkWell_util.dart';
import 'package:xinxuan/common/count_down.dart';
import 'package:xinxuan/common/network_image_util.dart';
import 'package:xinxuan/router/app_routers.dart';
import 'package:xinxuan/utils/color_util.dart';
import 'package:get/get.dart';

class BlindBoxGoodsItem extends StatelessWidget {

  final int id;
  final int endTime;
  final String title;
  final String image;
  final String price;
  final int markNum; 

  BlindBoxGoodsItem({
    required this.id,
    required this.endTime,
    required this.title,
    required this.image,
    required this.price,
    required this.markNum,
  });

  @override
  Widget build(BuildContext context) {
    return InkWellUtil.shakeProofInkWell(Stack(
      children: [
        Container(
          width: 165.w,
          decoration: BoxDecoration(
            color: bgWhiteColor,
            borderRadius: BorderRadius.circular(5.w)
          ),
          child: Column(
            children: [
              NetworkImageUtil(
                url: image, 
                width: 165.w, 
                height: 165.w,
                topLeftRadius: 5.w,
                topRightRadius: 5.w,
              ),
              Container(
                margin: EdgeInsets.only(top: 6.h),
                padding: EdgeInsets.symmetric(horizontal: 6.w),
                child: Column(
                  children: [
                    Text(
                      '$title',
                      overflow: TextOverflow.ellipsis,
                      maxLines: 2,
                      style: TextStyle(
                        color: textBlackColor,
                        fontSize: 14.sp,
                        fontWeight: FontWeight.bold
                      ),
                    ),
                    SizedBox(height: 6.h),
                    Row(
                      children: [
                        Text.rich(
                          TextSpan(
                            text: '¥',
                            style: TextStyle(
                              color: mainTextColor,
                              fontSize: 12.sp,
                              fontWeight: FontWeight.bold
                            ),
                            children: [
                              TextSpan(
                                text: '$price',
                                style: TextStyle(
                                  color: mainTextColor,
                                  fontSize: 16.sp,
                                  fontWeight: FontWeight.bold
                                )
                              )
                            ]
                          )
                        ),
                        Expanded(child: Text(
                          '$markNum人已预约',
                          overflow: TextOverflow.ellipsis,
                          maxLines: 1,
                          textAlign: TextAlign.end,
                          style: TextStyle(
                            color: textSubtitleColor,
                            fontSize: 12.sp
                          ),
                        ))
                      ],
                    )
                  ],
                ),
              ),
              SizedBox(height: 12.h),
            ],
          ),
        ),
        Positioned(
          top: 0,
          left: 0,
          child: Container(
            width: 118.w,
            height: 24.h,
            decoration: BoxDecoration(
              border: Border.all(
                color: mainTextColor,
                width: 1.w
              ),
              borderRadius: BorderRadius.circular(5.w)
            ),
            child: Row(
              children: [
                Container(
                  height: 24.h,
                  width: 54.w,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: mainTextColor,
                    // borderRadius: BorderRadius.horizontal(left: Radius.circular(5.w))
                  ),
                  child: Text(
                    '剩余时间',
                    style: TextStyle(
                      color: textWhiteColor,
                      fontSize: 12.sp
                    ),
                  ),
                ),
                Expanded(child: Container(
                  height: 24.h,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: bgRecoveryStatus,
                    borderRadius: BorderRadius.horizontal(right: Radius.circular(5.w))
                  ),
                  child: CountDown(endTime),
                ))
              ],
            ),
          )
        )
      ],
    ), () {
      Get.toNamed(
        '${AppRouters.COMMON_PAGE}${AppRouters.BLIND_BOX_DETAIL_PAGE}',
        arguments: {
          'id': id
        }
      );
    });
  }
}